import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import AreaView from '../../components/Layout/AreaView';
import {getMyScore} from '../../service/my';
import styles from './style';

const ps = 10;
const MyScore = () => {
  const [pn, setPn] = useState(1);
  const [list, setList] = useState([]);
  const [refreshing, setRefreshing] = React.useState(false);
  const [total, setTotal] = React.useState(0);
  const renderItem = ({item}) => {
    return (
      <TouchableOpacity activeOpacity={1} key={item.epId}>
        <View style={styles.top}>
          <View style={styles.dot_container}>
            <View style={styles.dot} />
          </View>
          <Text style={styles.time}>{item.createTime}</Text>
        </View>
        <View style={styles.bottom}>
          <View style={styles.line_container}>
            <View style={styles.line} />
          </View>
          <View style={styles.desc_container}>
            <View style={{flex: 1}}>
              <Text style={styles.title}>{item.epDesc}</Text>
            </View>
            <View
              style={
                !item.apScore || item.apScore < 60
                  ? styles.score_no
                  : styles.score
              }>
              <Text style={styles.score_text}>{item.apScore || '0'}分</Text>
            </View>
          </View>
        </View>
      </TouchableOpacity>
    );
  };

  useEffect(() => {
    getMyScore({pn}).then((res) => {
      console.log(res);
      setList(res.rows);
      setTotal(res.total || 0);
      let _list = list;
      if (pn * 1 !== 1) {
        _list = _list.concat(res.rows);
      } else {
        _list = res.rows;
        setRefreshing(false);
      }
      setList(_list || []);
    });
  }, [pn]);

  const onEndReached = () => {
    if (pn * 10 > total) {
      return false;
    }
    const num = pn + 1;
    setPn(num);
  };
  return (
    <AreaView>
      <FlatList
        style={styles.container}
        refreshing={refreshing}
        showsVerticalScrollIndicator={false}
        data={list}
        renderItem={renderItem}
        keyExtractor={(item) => item.courseId}
        onEndReachedThreshold={0.2}
        onEndReached={onEndReached}
        ListFooterComponent={() => (
          <View style={styles.footer_loading}>
            {ps * pn > (total || 10) ? (
              <Text style={styles.footer_text}>---我是有底线的---</Text>
            ) : (
              <ActivityIndicator
                animating={true}
                color="#666"
                text="数据加载中......"
              />
            )}
          </View>
        )}
      />
    </AreaView>
  );
};

export default MyScore;
